<template>
  <div class="commontArea">
     <div class="commont">
         <div class="notUserInfo" v-if="!userLoginStatus">
             <el-button @click="setSignVisible(true)" size="mini"  type="primary">立即登陆</el-button>
         </div>
         <div class="comment-userInfo">
             <img :src="userAvatar">
         </div>
         <div class="comment-main">
            <el-input
                type="textarea" 
                v-model="commentContent"
                :autosize="{ minRows: 3, maxRows: 4}"
                placeholder="请输入您的评论...">
            </el-input>
            <div class="commentBtn">
                <el-button size="mini" type="primary" @click="pushCommont()">发布</el-button>
            </div>
         </div>
     </div>
    <div class="commontList">
        <div class="commontTitle">
            <h3><i></i>精彩评论({{sentenceCommontCount}})</h3>
        </div>
        <div class="commontBody">
            <template v-if="sentenceCommont.length">
                <div class="commontItem" v-for="(item, key) in sentenceCommont" :key="key">
                    <div class="commontItemTit">
                        <div class="userHeadImg">
                            <img :src="item.userInfo.head_pic ? `${fileDomin}/${item.userInfo.head_pic}` : '/static/images/noAvatar.jpg'">
                        </div>
                        <div class="userInfo">
                            <p>{{item.userInfo.nickname}}</p>
                            <p><span>{{sentenceCommontCount - key}}楼</span> <span>{{item.create_time}}</span></p>
                        </div>
                    </div>
                    <div class="userComment">
                        <p>{{item.content}}</p>
                    </div>
                    <div class="handleComment">
                        <span @click="handPraise(item.id)" :class="{ active: commentThumbsUp.includes(item.id)}"><i class="iconfont">&#xe60c;</i>{{item.praise || 0}}</span>
                        <span @click="replyCommentInput(item.id)" :class="{ active: replyId === item.id && !replyReplyId }"><i class="iconfont">&#xe60d;</i>回复</span>
                    </div>
                    <transition name="slide-fade">
                        <div class="replyInput" v-if="replyId === item.id">
                            <el-input
                                type="textarea" 
                                v-model="replyContent"
                                :autosize="{ minRows: 3, maxRows: 4}"
                                placeholder="请输入您的评论...">
                            </el-input>
                            <div class="commentBtn">
                                <el-button size="mini" @click="cannotCommont()">取消</el-button>
                                <el-button size="mini" type="primary" @click="replyCommont(item)">回复</el-button>
                            </div>
                        </div>
                    </transition>

                    <div class="replyComment" v-for="(reply, keys) in item.reply" :key="keys">
                        <div class="commontItemTit">
                            <div class="userHeadImg">
                                <img :src="reply.userInfo.head_pic ? `${fileDomin}/${reply.userInfo.head_pic}` : '/static/images/noAvatar.jpg'">
                            </div>
                            <div class="userInfo">
                                <p>{{reply.userInfo.nickname}} 回复 {{reply.toUserInfo.nickname}}</p>
                                <p><span>{{reply.create_time}}</span></p>
                            </div>
                        </div>
                        <div class="userComment">
                            <p>{{reply.content}}</p>
                        </div>
                        <div class="handleComment">
                            <span @click="replyReplyCommentInput(item.id, reply.id, reply.userInfo)" :class="{ active: replyReplyId === String(item.id) + String(reply.id) }"><i class="iconfont">&#xe60d;</i>回复</span>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else>
                <p class="notComment">暂无评论</p>
            </template>
        </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from 'vuex';
import { clone } from '~/utils';
export default {
    props: ['sentenceId'],
    data() {
        return {
            commentContent: '',
            replyId: 0,
            replyReplyId: 0,
            replyContent: '',
            replyToUserInfo: null
        };
    },
    computed: {
        ...mapGetters('sentence', ['specialList', 'sentenceCommont', 'sentenceCommontCount', 'commentThumbsUp']),
        ...mapGetters(['userInfo', 'fileDomin']),
        userLoginStatus() {
            return this.userInfo && this.userInfo.users_id;
        },
        userAvatar() {
            if (this.userLoginStatus) {
                return this.userInfo.avatar;
            }
            return '/static/images/noAvatar.jpg';
        }
    },
    methods: {
        ...mapActions('sentence', ['getCommont', 'setCommont', 'commentPraise', 'handReplyCommont']),
        ...mapMutations('sentence', {
            setSentenceCommont: 'SET_SENTENCE_COMMONT',
            setSignVisible: 'SET_SIGNVISIBLE'
        }),
        ...mapMutations({
            setSignVisible: 'SET_SIGNVISIBLE'
        }),
        async pushCommont() {
            if (!this.commentContent) {
                this.$notify({
                    message: '评论内容不能为空哦',
                    type: 'warning',
                    offset: 50,
                    duration: 3000
                });
                return;
            }
            await this.setCommont({
                sentenceId: this.sentenceId,
                comment: this.commentContent
            })
        },
        replyCommentInput(commentId) {
            this.replyContent = ``;
            this.replyId = commentId;
            this.replyReplyId = 0;
            this.replyToUserInfo = null;
            this.replyContent = '';
        },
        replyReplyCommentInput(commentId, replyId, replyUserInfo) {
            this.replyId = commentId;
            this.replyReplyId = String(commentId) + String(replyId);
            this.replyToUserInfo = replyUserInfo;
            this.replyContent = `@${replyUserInfo.nickname} `;
        },
        cannotCommont() {
            this.replyId = 0;
            this.replyReplyId = 0;
            this.replyContent = '';
            this.replyToUserInfo = null;
        },
        async replyCommont(comment) {
            let compose_id = this.sentenceId;
            let compose_type = 1;
            let comment_id = comment.id;
            let content = this.replyContent;
            let to_uid = this.replyToUserInfo && this.replyToUserInfo.users_id ? this.replyToUserInfo.users_id : comment.userInfo.users_id;
            if (!content) {
                this.$notify({
                    message: '评论内容不能为空哦',
                    type: 'warning',
                    offset: 50,
                    duration: 3000
                });
                return;
            }
            await this.handReplyCommont({
                compose_id: this.sentenceId,
                compose_type: 1,
                comment_id: comment.id,
                content: this.replyContent,
                to_uid: comment.userInfo.users_id
            })
            await this.getCommont({
                id: this.sentenceId,
                type: 1
            })
            this.cannotCommont();
        },
        async handPraise(commentId) {
            let status = 1;
            if (this.commentThumbsUp.includes(commentId)) {
                status = 0;
            }
            let result = await this.commentPraise({
                typeId: commentId,
                type: 2,
                status: status
            })
            if (result.code !== 0) {
              this.$notify({
                  message: result.msg,
                  type: 'warning',
                  offset: 50,
                  duration: 3000
              });
              return;
            }
            let commonts = clone(this.sentenceCommont);
            commonts = commonts.map(item => {
                if (item.id === commentId) {
                    let praise = item.praise;
                    if (status) {
                        return {
                            ...item,
                            praise: praise + 1
                        };
                    }
                    return {
                        ...item,
                        praise: praise - 1
                    };
                }
                return item;
            })
            this.setSentenceCommont(commonts);
        }
    }
}
</script>
